/*
  学习目标：使用Redux管理数据, 保证组件卸载后数据不丢失
*/

import { useEffect } from 'react';
import { useState } from 'react';
import store from './store';

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div>
      <h1>Redux基础案例</h1>
      <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>
      {show && <Son />}
    </div>
  );
}

function Son() {
  // 1. 从Redux中获取初始值
  const [count, setCount] = useState(store.getState().count);

  // 💥💥 Redux和React的关系
  // Redux中的state， 只是保存数据的地方， 不会驱动视图变化
  // React中的state， 驱动视图变化

  useEffect(() => {
    // 3. 监听store变化， 把redux的state， 同步给React中的state
    store.subscribe(() => {
      setCount(store.getState().count);
    });
  }, []);

  return (
    <div>
      <h2>子组件</h2>
      <h2>count:{count}</h2>
      {/* 2. 点击事件修改redux中的数据 */}
      <button
        onClick={() => {
          store.dispatch({ type: 'add' });
        }}
      >
        +1
      </button>
      <button
        onClick={() => {
          store.dispatch({ type: 'des' });
        }}
      >
        -1
      </button>
    </div>
  );
}
